<template>
  <div>
    <div class="scroll-wrap">
      <div v-for="(item,idx) in list" :key="idx" class="order-info">
        <div class="head">
          <p class="row">
            <span class="date-time">{{item.orderDate}}</span>
            <span class="amount">{{item.amount}}</span>
          </p>
          <p class="row">
            <span class="order-num">订单号: {{item.openShopOrderNo}}</span>
            <button
              v-show="item.state==='0'"
              type="button"
              class="order-action red"
              @click="handlePay(item)"
            >去支付</button>
          </p>
        </div>
        <p class="text">
          <span class="label">申请身份</span>
          <span class="value">{{identity[item.shopIdentity]}}</span>
        </p>
        <!-- <p class="text">
          <span class="label">开店状态</span>
          <span class="value green">审核中</span>
        </p>-->
        <p class="text">
          <span class="label">订单状态</span>
          <span
            class="value"
            :class="{red:item.state==='0', green:item.state==='1', gray:item.state==='5'}"
          >{{state[item.state]}}</span>
        </p>
        <!-- <p class="text">
          <span class="label">发票类型</span>
          <span class="value">未开具</span>
        </p>-->
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_SHOP_OPEN_ORDER_PAGE } from '@/api/new-open-shop'
import { dateFormatter } from '@/utils'
import { getCurrentPageParams, currencyFormatter } from '@/utils/wx-tools'
import payMixin from '../mixins/pay'

export default {
  mixins: [payMixin],
  data () {
    return {
      list: [],
      identity: { ENTITY: '实业宝', VIRTUAL: '网商宝', PERSONAL: '创业宝' },
      openShopType: {},
      state: {
        '0': '未支付',
        '1': '已支付',
        '2': '已取消',
        '3': '已完成',
        '4': '退款中',
        '5': '已退款'
      }
    }
  },
  computed: {},
  onShow () {
    this.getOrderList()
  },
  methods: {
    handlePay (item) {
      this.openShopPay(item.shopIdentity, item.amount)
    },
    /* api */
    getOrderList () {
      const vm = this

      let customerId = getCurrentPageParams('customerId') || vm.$cookie.get('store-login').customerId || vm.$cookie.get('account').customerId
      let providerId = vm.$store.state.account.providerId

      FIND_SHOP_OPEN_ORDER_PAGE({ customerId, providerId }, 1, 999)
        .then(r => {
          if (r.data.code === '0') {
            const { list } = r.data.data
            vm.list = (list || []).map(_ => ({
              ..._,
              orderDate: dateFormatter('yyyy年M月d日 hh:mm', _.orderDate),
              amount: _.amount > 0 ? currencyFormatter(_.amount, 0.01) : '免费'
            }))
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$red: #f0321a;
$blue: #7989fe;
$green: #73d265;
$gray: #c1c1c1;

.scroll-wrap {
  background-color: #f6f6f6;
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  > .order-info {
    background-color: #fff;
    margin-bottom: 15px;
    border-radius: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    > .head {
      padding: 5px 10px 1px;
      border-bottom: 1px solid #f6f6f6;
      > .row {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin: 10px 0;
        > .amount {
          color: $red;
        }
        > .order-num {
          font-size: 14px;
          color: $gray;
        }
        > .order-action {
          background: transparent;
          outline: none;
          padding: 3px 8px;
          font-size: 16px;
          line-height: 16px;
          border-radius: 12px;
          border: 1px solid transparent;
          margin: 0;
          &.blue {
            color: $blue;
            border-color: $blue;
          }
          &.red {
            color: $red;
            border-color: $red;
          }
        }
      }
    }
    > .text {
      padding: 15px 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:last-child {
        padding-bottom: 15px;
      }
      > .label {
        font-size: 14px;
      }
      > .value {
        font-size: 16px;
        &.red {
          color: $red;
        }
        &.green {
          color: $green;
        }
        &.gray {
          color: $gray;
        }
      }
    }
  }
}

.red {
  color: $red;
}
.blue {
  color: $blue;
}
.green {
  color: $green;
}
.gray {
  color: $gray;
}
</style>

